/**
 * Created by tang on 2018/6/8.
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider, Button ,Tabs,Form,Col,Row,Input,List,Avatar,Icon,Popconfirm,Upload,message} from 'antd';
//面包屑和title
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '../../components/DescriptionList';
import styles from './CensorWords.less';
import queryString from 'query-string';
import  Editor  from '../../components/Ueditor/Ueditor';
import moment from 'moment';
const TabPane = Tabs.TabPane;
import placeImg from '../../assets/icon_default.png';
import { urlAction } from '../../utils/global';
const FormItem = Form.Item;
const { TextArea } = Input;
//权限
import { checks } from '../../utils/authority';

const { Description } = DescriptionList;

@connect(state => ({
  banner: state.banner
}))
@Form.create()

export default class CensorWords extends Component {

//数据初始化
  state = {
    pageSize: 10, //页数
    showLoadMore: true,
    loadingMore: false,
    page:1,
    content1:'',
  };

  componentDidMount() {


  }

  onClick(){
    var displayCss = document.getElementById('content_');
    displayCss.style.cssText="display:block";
  }
  onClick1(){
    var displayCss = document.getElementById('content_');
    displayCss.style.cssText="display:none";
  }

  onClick2(){

    const {banner:{fileName}} = this.props;
    if(fileName){
      this.props.dispatch({
        type:'banner/censorWordsUp',
        payload:{
          fileName:fileName
        }
      })
    }else{
      message.error('请选择文件!');
    }

  }

  downLoad1(){
    this.props.dispatch({
      type:'banner/censorWords',
      payload:{

      },
      history:this.props.history
    })
  }


  handlePreview(file) {
    const {dispatch} = this.props;
    dispatch({
      type: 'banner/save',
      payload: {
        previewVisible: true,
        fileName:file.fileName
      }
    });
  }

  handleChanges(fileList) {
    const {dispatch} = this.props;
    //dispatch({
    //  type: "banner/save",
    //  payload: {fileList: fileList.fileList}
    //});
    var file = fileList.fileList[0];
    var fileRemoved = fileList.file;
    if (file){
      if (file.status === 'done') {
        var fileName = file.response.body.fileName;
        dispatch({
          type: "banner/save",
          payload: {fileName: fileName}
        });
      }
    } else if (fileRemoved.status === "removed"){
      dispatch({
        type: "banner/save",
        payload: {fileName: ""}
      });
    }
  }

  render() {

    //数据
    const { showLoadMore, loadingMore } = this.state;
    const { banner: { fileList} } = this.props;
    //标

    const uploadButton = (
      <Button>
        <Icon type="upload" />点击上传
      </Button>
    );

    return (
      <PageHeaderWrapper
        title={"通知"}
      >
        <Card>

          <Card bordered={false}>
            <DescriptionList size="large" style={{ marginBottom: 32 }}>
              <div>
                <Button onClick={this.downLoad1.bind(this)}>
                  <Icon type="download"/>点击下载
                </Button>
              </div>
              <br/><br/>
              <div>
                <Button onClick={this.onClick.bind(this)}>
                  上传敏感字符文件
                </Button>
                <p>敏感字符文件格式 文件以“.txt” 后缀结尾，每个“敏感词汇”单独一行（即，输入一个“敏感词汇”，需要换一行，再输入下一个），敏感词汇输入完成之后，将文件保存后上传.</p>
              </div>
            </DescriptionList>
            <Divider style={{ marginBottom: 32}}/>
            <div id='content_' style={{display:'none'}}>
              <Upload
                action={urlAction}
                data={{projectName:'FbLife', thumbnail_size: 1000}}
                onPreview={this.handlePreview.bind(this)}
                onChange={this.handleChanges.bind(this)}
              >
                {uploadButton}
              </Upload>
              <br/><br/>
              <Button onClick={this.onClick1.bind(this)}>取消</Button>&nbsp;&nbsp;&nbsp;
              <Button onClick={this.onClick2.bind(this)}>保存</Button>
            </div>
          </Card>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
